<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <clipPath id="clip1">
                <circle cx="50" cy="40" r="10" />
            </clipPath>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="#caf" clip-path="url(#clip1)"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5"/>
        <circle cx="50" cy="40" r="10" fill="none" stroke="#00f" stroke-dasharray="2.5" stroke-width="0.8" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <clipPath id="clip2">
                <rect x="30" y="40" width="40" height="40"/>
            </clipPath>
        </defs>

        <g clip-path="url(#clip2)">
            <rect x="20" y="20" width="60" height="40" fill="#caf" />
            <circle cx="50" cy="80" r="20" fill="#fac"/>
        </g>
        <rect x="30" y="40" width="40" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5" stroke-width=".8"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <clipPath id="clip3">
                <rect x="30" y="20" width="40" height="40" transform="rotate(45,50,40)" />
            </clipPath>
        </defs>

        <g clip-path="url(#clip3)">
            <image xlink:href="https://img0.baidu.com/it/u=4059368189,1445621955&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" 
                x="0" y="0"  opacity="0.5" width="100" height="100"  />
        </g>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <linearGradient id="gradient1">
                <stop offset="10%" stop-color="#fac" stop-opacity="1"/>
                <stop offset="25%" stop-color="#caf" stop-opacity=".8"/>
                <stop offset="50%" stop-color="#cfa" stop-opacity="1"/>
                <stop offset="75%" stop-color="#fca" stop-opacity=".8"/>
                <stop offset="100%" stop-color="#acf" stop-opacity="1"/>
            </linearGradient>

            <clipPath id="clip4">
                <text x="50"  y="60" font-size="10" text-anchor="middle">I am DMC</text>
            </clipPath>
        </defs>

        <rect x="20" y="30" width="60" height="40" fill="url(#gradient1)" clip-path="url(#clip4)" />

        
    </svg>

    <script src="index.js"></script>
</body>
</html>